import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import { MotionPlugin } from '@vueuse/motion'

// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'
// 全局炫酷效果样式
import './styles/global-effects.css'
// 深色主题修复样式
import './styles/dark-theme-fix.css'

// 开发环境下启用VConsole调试工具
if (import.meta.env.DEV) {
  import('vconsole').then(({ default: VConsole }) => {
    const vConsole = new VConsole({
      defaultPlugins: ['system', 'network', 'element', 'storage'],
      theme: 'dark',
      target: document.querySelector('body'),
      maxLogNumber: 1000,
      onReady: () => {
        console.log('VConsole调试工具已启动！')
        console.log('💡 提示：点击页面元素可以查看DOM结构')
        console.log('🔧 调试功能：')
        console.log('  - 点击Element标签查看页面元素')
        console.log('  - 点击Network标签查看网络请求')  
        console.log('  - 点击System标签查看系统信息')
        console.log('  - 点击Storage标签查看本地存储')
      }
    })
    
    // 自定义按钮样式，让它更加明显
    setTimeout(() => {
      const vcBtn = document.querySelector('#__vconsole .vc-switch') as HTMLElement
      if (vcBtn) {
        vcBtn.style.cssText += `
          background: linear-gradient(45deg, #06ffa5, #26cf6b) !important;
          box-shadow: 0 2px 10px rgba(6, 255, 165, 0.4) !important;
          border: 2px solid rgba(255, 255, 255, 0.2) !important;
          transform: scale(1.1) !important;
        `
      }
    }, 1000)
  })
}

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)
app.use(MotionPlugin)

// 初始化主题
import { useThemeStore, useAuthStore } from '@/store'
const themeStore = useThemeStore()
const authStore = useAuthStore()

// 初始化主题和认证状态
themeStore.initTheme()
authStore.initAuth()

app.mount('#app') 